<template>
  <div class="zw_table">
    <el-table
      class="table_box"
      row-key="id"
      :height="tabH"
      :style="{ width: '100%', height: tabH }"
      stripe
      ref="multipleTableRef"
      :data="prop.tableData"
      @selection-change="sectionChange"
      @select-all="selectAll"
      tooltip-effect="light"
      header-row-class-name="table_header_title"
    >
      <el-table-column v-if="prop.tableParams.selection" :reserve-selection="true" type="selection" width="50px" align="center" fixed="left"></el-table-column>
      <el-table-column v-for="item in prop.tableParams.tabH" :key="item.prop" :label="item.label" :width="item.width" :fixed="item.fixed" :align="item.align || 'center'" :formatter="item.formatter" :show-overflow-tooltip="item.showTip">
        <template #default="scope">
          <template v-if="item.isTag">
            <el-popover v-if="scope.row[item.prop].length > 0" placement="top" :width="400" trigger="hover" popper-class="popper">
              <template #reference>
                <div class="tags_con">
                  <div class="tags_box">
                    <el-tag class="table_tag" type="warning" size="small" v-for="item in scope.row[item.prop]" :key="item.id">
                      {{ item.name }}
                    </el-tag>
                  </div>
                </div>
              </template>
              <div class="pop_dialog">
                <el-tag class="table_tag" type="warning" size="small" v-for="item in scope.row[item.prop]" :key="item.id">
                  {{ item.name }}
                </el-tag>
              </div>
            </el-popover>
            <div v-else>--</div>
          </template>
          <template v-else-if="item.isshowprover">
            <el-popover v-if="scope.row[item.prop].length > 0" placement="top" :width="400" trigger="hover" popper-class="popper">
              <template #reference>
                <div class="tags_con">
                  <div class="content_box tags_box">
                    {{ scope.row[item.prop] }}
                  </div>
                </div>
              </template>
              <div class="pop_dialog">
                {{ scope.row[item.prop] }}
              </div>
            </el-popover>
            <div v-else>--</div>
          </template>
          <!-- 朋友圈素材 -->
          <template v-else-if="item.friendType">
            <slot :row="scope.row" :item="item"></slot>
          </template>
          <!-- 好友欢迎语 -->
          <template v-else-if="item.channelFriendWel">
            <slot :row="scope.row" :item="item"></slot>
          </template>
          <template v-else-if="item.image">
            <el-image class="img" :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]" :preview-teleported="true" />
          </template>
          <div v-else-if="item.action">
            <el-button size="small" v-for="v in item.fn" :key="v.id" @click="v.click(scope.row)" :disabled="v.disabled?.(scope.row)">{{ v.name }}</el-button>
          </div>
          <div v-else-if="item.isDynamic">
            <el-button :class="!scope.row.is_edit && v.id == 1 ? 'dynamic' : ''" size="small" v-for="v in item.fn" :key="v.id" @click="v.click(scope.row)">{{ v.name }}</el-button>
          </div>

          <!-- 返回对象或者需要转义的字段处理 -->
          <div v-else-if="item.valid">
            {{ item.valid(scope.row[item.prop]) }}
          </div>
          <div v-else class="hide_con">{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ prop.emtyText || '暂无数据' }}</div>
      </template>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, watch } from 'vue'
  import { useStore } from '@/store'
  import { tableH, reSize } from '@/utils/utils'
  const multipleTableRef = ref(null)
  const store = useStore()
  const height = ref(450)
  const tabH = ref('500px')
  const prop = defineProps({
    tableData: {
      type: Array,
      default: () => []
    },
    tableParams: {
      type: Object
    },
    emtyText: {
      type: String,
      default: '暂无数据'
    }
  })
  const sectionChange = (selection: any) => {
    store.dispatch('table', {
      tableData: selection
    })
  }
  const selectAll = (selection: any) => {
    store.dispatch('table', {
      tableData: selection,
      tableAll: true
    })
  }
  //clear select
  const clearSelect = () => {
    multipleTableRef.value!.clearSelection()
  }
  // 表格的自适应高度
  const getTableH = (val?: number = 0) => {
    const h = parseInt(tableH('.table_box'))
    tabH.value = h - val + 'px'
  }
  onMounted(() => {
    getTableH()
    reSize(getTableH)
  })
  defineExpose({
    getTableH,
    clearSelect
  })
</script>
<style lang="scss" scoped>
  .zw_table {
    margin: 0 20px;
    :deep(.el-table__fixed-right-patch) {
      background: #f9f9f9;
    }
    .tags_con {
      margin: auto;
      // width: 350px;
      align-items: center;
      display: flex;
      .tags_box {
        text-align: left;
        // width: 280px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .content_box {
        -webkit-line-clamp: 1;
        line-clamp: 1;
      }
      .tag_total {
        flex: 1;
        span {
          color: #ff6b00;
        }
      }
    }
    .img {
      width: 80px;
    }
    .hide_con {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .emty_img {
      transform: translateX(15%);
    }
    .emty_title {
      margin-top: -50px;
    }
    .table_tag {
      margin: 5px;
    }
  }
</style>
<style lang="scss">
  .table_header_title {
    height: 48px;
    background: #f9f9f9;
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
      display: table-cell !important;
    }
  }
  .popper {
    .pop_dialog {
      display: flex;
      flex-wrap: wrap;
      .table_tag {
        margin-right: 16px;
        margin-bottom: 10px;
      }
    }
  }
  .el-popper {
    max-width: 30%;
  }
  .dynamic {
    display: none;
  }
</style>
